<template>
	<!-- 店铺 -->
	<view class="pages-home">
		<view class="pd-md">
			<view >
				<view class="fill-base flex-center radius-20 pd-md mb-md">
						<text :class="tabindex==2?'actbtn':'typebtn'" @click="tabhbean(2)">幸福米</text>
						<text  :class="tabindex==1?'doubtn':'typebtn'" @click="tabhbean(1)">幸福豆</text>
					
				</view>
				<view class="fill-base flex-center radius-20 pd-md mb-md">
					<view class="flex-column flex-center" style="width: 50%;" v-if="tabindex==1">
						<view class="f-title c-title mb-lg">我的幸福豆</view>
						<view class="f-title c-warning">{{userInfo.withdraw}}</view>
					</view>
					<view class="flex-column flex-center" style="width: 50%;" v-if="tabindex==1">
						<view @click="gorecord" class="f-desc c-base radius-16 flex-center mb-sm" style="width: 150rpx; height: 60rpx;background-color:#8228f9;margin-top: 10rpx;;">豆豆明细</view>
					</view>
					<view class="flex-column flex-center" style="width: 100%;" v-if="tabindex==2">
						<view class="f-title c-title mb-lg">我的幸福米</view>
						<view class="f-title c-warning">{{userInfo.score}}</view>
					</view>
					<view class="flex-column flex-center" style="width: 50%;" v-if="tabindex==2">
						<view @click="goMiView" class="f-desc c-base radius-16 flex-center mb-sm" style="width: 150rpx; height: 60rpx;background-color:#108ee9;margin-top: 10rpx;;">米米明细</view>
					</view>
				</view>
				<view class="fill-base flex-center radius-20 pd-md mb-md">
					<view class="mt-20 h-450" v-if="tabindex==1">
						<canvas canvas-id="qrcode" v-show="qrShow" class="qrcode"/>
						<view class="f-title c-title mb-lg mt-20 ta"  style="display: flex; align-items: left;">
							
						 <input type="number" disabled="true"  v-model="number" style="width: 50%;"><text>幸福豆</text>
						 
						 </view>
						<text @tap.stop="setHappybean()" class="clear-btn order cs-btn" style="padding: 5px 15px;font-size: 20px;border-radius: 5px;background-color: #;margin-left: 40px;">设置收款码</text>

						 
						<view class="f-title c-title mb-lg mt-20 ta" style="position:fixed;z-index:999;bottom:100px;width:100%;left:-10px;">
							<text @tap.stop="scanCode()" class="clear-btn order cs-btn" style="padding: 10px 128px;font-size: 30px;border-radius: 25px;">扫码</text>
							
						</view>
					</view>
					<view class="mt-20 h-450" v-else-if="tabindex==2">
						<canvas canvas-id="qrcode" v-show="qrShow" class="qrcode"/>
						<view class="f-title c-title mb-lg mt-20 ta"  style="display: flex; align-items: left;">
							
						 <input type="number"  v-model="number" style="width: 50%;"><text>幸福米</text>
						 
						 </view>
						<text @tap.stop="setHappybean()" class="clear-btn order cs-btn" style="padding: 5px 15px;font-size: 20px;border-radius: 5px;background-color: #108ee9;margin-left: 40px;">设置收款码</text>
						
						 
						<view class="f-title c-title mb-lg mt-20 ta" style="position:fixed;z-index:999;bottom:100px;width:100%;left:-10px;">
							<text @tap.stop="scanCode()" class="clear-btn order cs-btn" style="padding: 10px 128px;font-size: 30px;border-radius: 25px;">扫码</text>
							
						</view>
						
						<!-- <view class="f-title c-title mb-lg mt-20 ta"  style="display: flex; align-items: left;">
							<text @tap.stop="setScore()"  class="clear-btn order cs-btn" style="padding: 5px 10px;font-size: 12px;border-radius: 5px;background-color: #108ee9;margin-left: 40px;">设置收款码</text>
							 <input type="number"  v-model="number" style="width: 30%;"> <text>幸福米</text></view>
						<view class="f-title c-title mb-lg mt-20 ta">
							<text @tap.stop="scanCode()"  class="clear-btn order cs-btn" style="padding: 10px 108px;font-size: 30px;border-radius: 25px;margin-bottom: 10px;">扫码</text>
							 -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	import uQRCode from '@/utils/uqrcode.js' //引入uqrcode.js
	import siteInfo from '@/siteinfo.js'
	import $api from '@/api/index.js'
	export default {
		data() {
			return {
				number: '1.00',
				userInfo: [],
				qrShow: false,				
				qrContent:'',
				result: '',
				imageUrl: '',
				tabindex:1
			}
		},
		mounted() {
			this.getUserHappybean()
		},
		methods: {
			//**生成二维码**//
			qrFun: function(text) {
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 200,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},
			scanCode() {
			  uni.scanCode({
			  	success: async (res) => {
			  	  this.result = res.result
			  	  var p_arr = this.result.split("&")
			  	  var param = {}
			  	  for (let key in p_arr) {
			  		let uid_arr = p_arr[key].split("=")
			  	  	param[uid_arr[0]] = uid_arr[1]
			  	  }
			  	  console.log('=============param')
			  	  console.log(param)
			  	  let result = await $api.user.turnHappyBean(param)
			  	  if(result){
			  		  uni.showToast({
			  			title: '成功转出'+param.number,
			  			icon: 'success',
			  			duration:5000
			  		})
			  	  }else{
			  		  uni.showToast({
			  		  	title: '转出失败',
			  		  	icon: 'error',
			  		  	duration:5000
			  		  })
			  	  }
			  	  
			  	},
			  	fail: (res) => {
			  	  uni.showToast({
			  		title: '扫描失败',
			  		icon: 'error',
			  		duration:5000
			  	  })
			  	}
			  })
			},
			async getSigninRecord(touid,number){
				let data = await this.$api.user.turnHappyBean({
					uid: touid,
					number: number
				})
			},
			getQrUrl(){
				let num = this.number != '' ? this.number : 1 
				let uid = this.userInfo.id
				let qrcodeUrl = `uid=${uid}&number=${num}`
				this.qrContent = qrcodeUrl
			},
			//用户的幸福豆数量
			async getUserHappybean() {
				let data = await this.$api.mine.index();
				this.userInfo = data;
				this.getQrUrl()
				this.qrFun(this.qrContent)
			},
			goWebView(){
				this.$util.goUrl({
					url: '/user/pages/stored/consume'
				})
			},
			goMiView(){
				this.$util.goUrl({
					url: '/user/pages/wallet/milist'
				})
			},
			gorecord(){
				this.$util.goUrl({
					url: '/user/pages/wallet/hbeanrecord'
				})
			},
			setHappybean() {
			  uni.showModal({
				title: '设置幸福豆数量',
				content: '',
				editable:true,//是否显示输入框
				placeholderText:'请输入幸福豆数量',//输入框提示内容
				confirmText: '确认',
				cancelText: '取消',
				success: (res) => {
				  if (res.confirm) {
					this.number = res.content
					this.getUserHappybean()
				  }
				} 
			  });
			},
			
			setScore() {
			  uni.showModal({
				title: '设置积分数量',
				content: '',
				editable:true,//是否显示输入框
				placeholderText:'请输入积分数量',//输入框提示内容
				confirmText: '确认',
				cancelText: '取消',
				success: (res) => {
				  if (res.confirm) {
					this.number = res.content
					let num = res.content
					let uid = this.userInfo.id
					let qrcodeUrl = `uid=${uid}&number=${num}&is_score=1`
					this.qrContent = qrcodeUrl
					this.qrFun(this.qrContent)
				  }
				} 
			  });
			},
			tabhbean(index)
			{
				if(index == 2)
				{
					this.tabindex = 2
					let num = this.number != '' ? this.number : 880
					let uid = this.userInfo.id
					let qrcodeUrl = `uid=${uid}&number=${num}&is_score=1`
					this.qrContent = qrcodeUrl
					this.qrFun(this.qrContent)
				}else if(index == 1)
				{
					this.tabindex = 1
					let num = this.number != '' ? this.number : 880
					let uid = this.userInfo.id
					let qrcodeUrl = `uid=${uid}&number=${num}`
					this.qrContent = qrcodeUrl
					this.qrFun(this.qrContent)
				}
			}
		}
	}
</script>
 
<style lang="scss">
	.pages-home {
		background-color: #eaeaea;
		.cover {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}
		.qrcode{
			display:inline-block;
			position:relative;
			// left:14%;
			margin: 10rpx auto;
			height: 200px; 
			width: 200px
		}
		.h-450{
			height:450px;
		}
		.ta{
			text-align:center;
		}
		.mt-20{
			margin-top: 20px;
		}
		.cs-btn{
			color: #ffffff;
			background-color: #8228f9;
			margin-left: 30px;
			margin-right: 30px;
		}
	}
	.typebtn{
		margin: 10px; 
		width:80px;
		padding: 8px 10px;
		color:#fff;
		background-color: lightgrey;
		border-radius: 6px;
		text-align: center;
	}
	.actbtn{
		margin: 10px;
		width:80px;
		padding: 8px 10px;
		color:#fff;
		background-color: #108ee9;
		border-radius: 6px;
		text-align: center;
	}
	.doubtn{
		margin: 10px;
		width:80px;
		padding: 8px 10px;
		color:#fff;
		background-color: #8228f9;
		border-radius: 6px;
		text-align: center;
	}
</style>